<template>
  <div class="messageInfo">
    <el-form :model="form" ref="formRef" label-width="auto" size="large">
      <el-form-item :label="$t('人设ID')" prop="name">
        <el-input v-model="form.id" :placeholder="$t('请输入INSV-”开头 后面接16位数字')" style="width: 500px" />
      </el-form-item>
      <el-form-item :label="$t('口令')" prop="name">
        <el-input v-model="form.kl" style="width: 500px" />
      </el-form-item>
      <el-form-item>
        <div style="
            width: 100%;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
          ">
          <el-button type="primary" @click="onSubmit111">{{ $t('注册人设') }}</el-button>
          <el-button type="primary" @click="onSubmit3">{{ $t('生成链接') }}</el-button>
          <!-- <el-button type="primary" @click="onSubmit4" v-if="url">跳转</el-button> -->
        </div>
      </el-form-item>
      <div style="max-height: 50vh;overflow-y: scroll;">
         <el-form-item :label="item.title" prop="name" v-for="(item, index) in url" :key="index">
        cpi: {{ item.cpi }}
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="primary" @click="onSubmit4(item.url)">{{ $t('跳转') }}</el-button>
      </el-form-item>
      </div>
    </el-form>

    <el-dialog v-model="dialogVisible" :title="$t('填写信息')" width="500">
      <el-form :model="form2" ref="formRef" label-width="auto" style="max-width: 600px">
        <el-form-item :label="$t('人设ID')" prop="name">
          <el-input v-model="form2.id" :placeholder="$t('请输入INSV-”开头 后面接16位数字')" style="width: 500px" />
        </el-form-item>
        <el-form-item :label="$t('国家')" prop="name">
          <el-select v-model="form2.gj" @change="handleChange" :placeholder="$t('请选择国家')" style="width: 500px">
            <el-option label="United States" value="US" />
            <el-option label="Australia" value="AU" />
            <el-option label="Canada" value="CA" />
            <el-option label="Great Britain" value="UK" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('语言')" prop="name">
          <el-select v-model="form2.yy" :placeholder="$t('请选择语言')" style="width: 500px">
            <el-option label="English" value="en" />
            <el-option label="Spanish" value="es" v-if="form2.gj === 'US'" />
            <el-option label="French" value="fr" v-if="form2.gj === 'CA'" />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('性别')" prop="name">
          <el-radio-group v-model="form2.xy" :placeholder="$t('请选择性别')" style="width: 500px">
            <el-radio value="male">{{ $t('男') }}</el-radio>
            <el-radio value="female">{{ $t('女') }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('生日')" prop="name">
          <el-date-picker v-model="form2.sr" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            :placeholder="$t('请选择生日')" style="width: 500px" />
        </el-form-item>
        <el-form-item :label="$t('邮编')" prop="name">
          <el-input v-model="form2.yb" :placeholder="$t('请输入邮编')" style="width: 500px" />
        </el-form-item>
        <el-form-item :label="$t('口令')" prop="name">
          <el-input v-model="form2.kl" :placeholder="$t('请输入口令')" style="width: 500px" />
        </el-form-item>
        <el-form-item>
          <div style="
              width: 100%;
              display: flex;
              justify-content: flex-end;
              gap: 10px;
            ">
            <el-button type="primary" @click="onSubmit1">{{ $t('下一步') }}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog v-model="dialogVisible2" :title="$t('第') + currentPage + $t('题')" width="80vw">
      <div style="height: 50vh; overflow-y: auto;">
        <div v-for="(item, index) in list" :key="index">
          <div v-if="currentPage === index + 1">
            <div>{{ item.question }}</div>
            <div v-if="item.display_mode === 'single_select' || item.display_mode === 'single_select_searchable'">
              <el-radio-group v-model="item.answers">
                <el-radio :value="ktem.id" size="large" v-for="(ktem, kndex) in item.an_list" :key="kndex">{{ ktem.text }}</el-radio>
              </el-radio-group>
            </div>
            <div v-if="item.display_mode === 'multi_select' || item.display_mode === 'multi_select_searchable'">
              <el-checkbox-group v-model="item.answers">
                <el-checkbox :label="ktem.text" :value="ktem.id" size="large" v-for="(ktem, kndex) in item.an_list"
                  :key="kndex" />
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>

      <div style="display: flex; justify-content: flex-end; gap: 10px;">
        <el-button type="primary" @click="xxx1">{{ $t('上一题') }}</el-button>
        <el-button type="primary" @click="xxx2" v-if="currentPage !== list.length">{{ $t('下一题') }}</el-button>
        <el-button type="primary" @click="xxx3" v-if="currentPage === list.length">{{ $t('下一页') }}</el-button>
        <el-button type="primary" @click="xxx4">{{ $t('提交') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { saverespondent, entryurl, getAttributes } from "../api/index";
import { ElMessage } from "element-plus";
import { ElLoading } from 'element-plus'
export default {
  data() {
    return {
      url: [],
      cpi: "",
      dialogVisible: false,
      dialogVisible2: false,
      list: [],
      list2: [],
      currentPage: 1,
      pageIndex: 1,
      form: {
        id: "",
        kl: "",
      },
      form2: {
        id: "",
        gj: "",
        yy: "",
        xy: "",
        sr: "",
        yb: "",
        kl: "",
      },

    };
  },
  methods: {
    xxx1() {
      this.currentPage--;
    },
    xxx2() {
      this.currentPage++;
    },
    async xxx3() {
      const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      this.list.forEach(item => {
        if (typeof item.answers === 'number' || item.answers.length > 0) {
          this.list2.push({
            id: item.id,
            answers: item.answers,
          })
        }
      })
      this.currentPage = 1;
      this.pageIndex++;
      this.list = [];
      try {
        let info2 = await getAttributes({
          country: this.form2.gj,
          pageIndex: this.pageIndex,
        });
        this.list = info2.data;
        this.list.forEach(item => {
          if (item.display_mode === 'single_select' || item.display_mode === 'single_select_searchable') {
            item.answers = '';
          }
          if (item.display_mode === 'multi_select' || item.display_mode === 'multi_select_searchable') {
            item.answers = [];
          }
        });
        loading.close()
      } catch (error) {
        loading.close()
      }

    },
    xxx4() {
      this.list.forEach(item => {
        if (typeof item.answers === 'number' || item.answers.length > 0) {
          this.list2.push({
            id: item.id,
            answers: item.answers,
          })
        }
      })
      this.list2 = Array.from(new Set(this.list2.map(JSON.stringify))).map(JSON.parse);
      this.list2.forEach(item => {
        if (typeof item.answers === 'number') {
          item.answers = [item.answers];
        }
      });
      console.log(this.list2);

      this.onSubmit997();
    },
    onSubmit111() {
      this.form2 = {
        id: "",
        gj: "",
        yy: "",
        xy: "",
        sr: "",
        yb: "",
        kl: "",
      };
      this.dialogVisible = true;
    },
    async onSubmit1() {
      const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      try {
        let info2 = await getAttributes({
          country: this.form2.gj,
          pageIndex: this.pageIndex,
        });
        this.list = info2.data;
        this.list.forEach(item => {
          if (item.display_mode === 'single_select' || item.display_mode === 'single_select_searchable') {
            item.answers = '';
          }
          if (item.display_mode === 'multi_select' || item.display_mode === 'multi_select_searchable') {
            item.answers = [];
          }
        });
        loading.close()
        this.dialogVisible2 = true;
        this.dialogVisible = false;
      } catch (error) {
        loading.close()
      }

    },
    async onSubmit997() {
      const loading = ElLoading.service({
        lock: true,
        text: '提交中...',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      try {
        let info = await saverespondent({
          p_id: this.form2.id,
          country: this.form2.gj,
          language: this.form2.yy,
          gender: this.form2.xy,
          birth_date: this.form2.sr,
          postal_code: this.form2.yb,
          koul: this.form2.kl,
          an_arr: JSON.stringify(this.list2),
        });
        ElMessage.success({
          message: this.$t('注册成功！'),
          offset: 100,
          duration: 5000,
        });
        this.form.kl = this.form2.kl;
        this.form.id = this.form2.id;
        this.dialogVisible2 = false;
        this.dialogVisible = false;
        this.list2 = [];
        this.pageIndex = 1;
        this.list = [];
        this.currentPage = 1;
        this.form2 = {
          id: "",
          gj: "",
          yy: "",
          xy: "",
          sr: "",
          yb: "",
          kl: "",
        };
        loading.close()
      } catch (error) {
        loading.close()
      }

    },
    onSubmit2() { },
    async onSubmit3() {
      const loading = ElLoading.service({
        lock: true,
        text: this.$t('生成链接中...'),
        background: 'rgba(0, 0, 0, 0.7)',
      });
      try {
        let info = await entryurl({
          koul: this.form.kl,
          p_id: this.form.id,
        });
        ElMessage.success({
          message: "生成链接成功！",
          offset: 100,
          duration: 5000,
        });
        loading.close()
        this.url = info.data;

      } catch (error) {
        loading.close()
      }


    },
    onSubmit4(url) {
      window.open(url);
    },
    handleChange(e) {
      this.form2.yy = "";
      console.log(e);
    },
  },
};
</script>

<style scoped>
.messageInfo {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>